<template>
  <div class="breadcrumb">
    <el-breadcrumb separator="/">
      <!-- <el-breadcrumb-item :to="{ path: '/' }">系统管理</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">日志管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>操作日志</el-breadcrumb-item>
      <el-breadcrumb-item>登录日志</el-breadcrumb-item>
      <el-breadcrumb-item>{{ breadcrumb }}</el-breadcrumb-item> -->
      <!-- <template v-for="item in breadcrumbs" :key="item.name">
        <el-breadcrumb-item :to="{ path: item.path }">{{
          item.name
        }}</el-breadcrumb-item>
      </template> -->
      <!--item.meta.title  显示的还是路由里面的名字 -->
    <!--item.meta.title  显示的还是路由里面的名字 -->
      <el-breadcrumb-item v-for="item in navArray">{{
      item.meta.title
      }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  PropType,
  onMounted,
  watch,
  ref
} from "vue";
import { IBreadcrumb } from "../type";
import { useRouter, useRoute } from "vue-router";
export default defineComponent({
  props: {
    breadcrumbs: {
      // type: Array as PropType<IBreadcrumb[]>,
      // default: () => []
      type: Array as PropType<any[]>,
      default: () => []
    }
  },
  setup(props) {
    // 自定义变量
    const navArray = ref([] as any);
    // 就要这样用，记死
    const route = useRoute();
    const router = useRouter();
    // 监听函数监听路径的变化
    watch(
      () => route.path,
      (newValue, oldValue) => {
        // route.matched 目前匹配的是哪个 获得的值赋给  navArray.valu 上面用 v-for遍历值
        navArray.value = route.matched;
      }
    );
    return {
      navArray
    };
  }
});
</script>
<style scoped>
.breadcrumb {
  padding-top: 10px;
  padding-left: 10px;
}
</style>
